{% extends 'cinema/admin/base_admin.html' %}
{% load static %}
{% load cinema_extras %}

{% block title %}评论管理 - 电影院票务管理系统{% endblock %}
{% block page_title %}评论管理{% endblock %}

{% block content %}
<!-- 页面头部 -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-1"><i class="fas fa-star me-2"></i>评论管理</h2>
        <p class="text-muted mb-0">管理所有用户对电影的评论和评分</p>
    </div>
</div>

<!-- 筛选和搜索 -->
<div class="admin-card mb-4">
    <div class="card-body">
        <div class="row">
            <div class="col-md-3">
                <label class="form-label">评分筛选</label>
                <select class="form-select" id="ratingFilter">
                    <option value="">全部评分</option>
                    <option value="5">5星</option>
                    <option value="4">4星</option>
                    <option value="3">3星</option>
                    <option value="2">2星</option>
                    <option value="1">1星</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">电影筛选</label>
                <select class="form-select" id="movieFilter">
                    <option value="">全部电影</option>
                    {% for movie in movies %}
                        <option value="{{ movie.title }}">{{ movie.title }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">时间筛选</label>
                <select class="form-select" id="timeFilter">
                    <option value="">全部时间</option>
                    <option value="today">今天</option>
                    <option value="week">本周</option>
                    <option value="month">本月</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">搜索评论</label>
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" class="form-control" id="reviewSearch" placeholder="搜索评论内容...">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 评论列表 -->
{% if reviews %}
    <div class="admin-card">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-list me-2"></i>评论列表 ({{ reviews|length }} 条)</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>用户信息</th>
                            <th>电影</th>
                            <th>评分</th>
                            <th>评论内容</th>
                            <th>评论时间</th>
                            <th style="width: 100px;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for review in reviews %}
                            <tr data-rating="{{ review.rating }}" data-movie="{{ review.movie.title }}" data-time="{{ review.created_at|date:'Y-m-d' }}">
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar me-3">
                                            {% if review.user.userprofile.avatar %}
                                                <img src="{{ review.user.userprofile.avatar.url }}" 
                                                     class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover;">
                                            {% else %}
                                                <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center" 
                                                     style="width: 40px; height: 40px;">
                                                    <i class="fas fa-user text-white"></i>
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div>
                                            <h6 class="mb-0">{{ review.user.username }}</h6>
                                            <small class="text-muted">{{ review.user.email }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        {% if review.movie.poster %}
                                            <img src="{{ review.movie.poster.url }}" 
                                                 class="rounded me-2" style="width: 40px; height: 60px; object-fit: cover;">
                                        {% else %}
                                            <div class="bg-secondary rounded d-flex align-items-center justify-content-center me-2" 
                                                 style="width: 40px; height: 60px;">
                                                <i class="fas fa-film text-white"></i>
                                            </div>
                                        {% endif %}
                                        <div>
                                            <h6 class="mb-0">{{ review.movie.title }}</h6>
                                            <small class="text-muted">{{ review.movie.genre }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        {% for i in "12345" %}
                                            {% if forloop.counter <= review.rating %}
                                                <i class="fas fa-star text-warning me-1"></i>
                                            {% else %}
                                                <i class="far fa-star text-muted me-1"></i>
                                            {% endif %}
                                        {% endfor %}
                                        <span class="ms-2 fw-bold">{{ review.rating }}.0</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="comment-content">
                                        {% if review.comment %}
                                            <p class="mb-0">{{ review.comment|truncatechars:100 }}</p>
                                            {% if review.comment|length > 100 %}
                                                <small class="text-muted">点击查看完整评论</small>
                                            {% endif %}
                                        {% else %}
                                            <span class="text-muted">暂无评论</span>
                                        {% endif %}
                                    </div>
                                </td>
                                <td>
                                    <small class="text-muted">{{ review.created_at|date:"Y-m-d H:i" }}</small>
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-outline-primary" 
                                                onclick="viewReview({{ review.id }})"
                                                title="查看详情">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger" 
                                                onclick="deleteReview({{ review.id }}, '{{ review.user.username }}')"
                                                title="删除评论">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% else %}
    <div class="admin-card">
        <div class="card-body text-center py-5">
            <i class="fas fa-star fa-4x text-muted mb-4"></i>
            <h4 class="text-muted mb-3">暂无评论信息</h4>
            <p class="text-muted">系统中还没有用户评论</p>
        </div>
    </div>
{% endif %}

<!-- 评论统计 -->
{% if reviews %}
    <div class="admin-card mt-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-chart-pie me-2"></i>评论统计</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3 text-center mb-3">
                    <div class="border rounded p-3">
                        <i class="fas fa-comments fa-2x text-primary mb-2"></i>
                        <h5 class="mb-1">{{ reviews|length }}</h5>
                        <small class="text-muted">总评论数</small>
                    </div>
                </div>
                <div class="col-md-3 text-center mb-3">
                    <div class="border rounded p-3">
                        <i class="fas fa-star fa-2x text-warning mb-2"></i>
                        <h5 class="mb-1">{{ avg_rating|floatformat:1 }}</h5>
                        <small class="text-muted">平均评分</small>
                    </div>
                </div>
                <div class="col-md-3 text-center mb-3">
                    <div class="border rounded p-3">
                        <i class="fas fa-users fa-2x text-success mb-2"></i>
                        <h5 class="mb-1">{{ unique_users }}</h5>
                        <small class="text-muted">评论用户数</small>
                    </div>
                </div>
                <div class="col-md-3 text-center mb-3">
                    <div class="border rounded p-3">
                        <i class="fas fa-film fa-2x text-info mb-2"></i>
                        <h5 class="mb-1">{{ unique_movies }}</h5>
                        <small class="text-muted">被评论电影数</small>
                    </div>
                </div>
            </div>
            
            <!-- 评分分布 -->
            <div class="row mt-4">
                <div class="col-12">
                    <h6>评分分布</h6>
                    <div class="row">
                        {% for rating in "54321" %}
                            <div class="col">
                                <div class="text-center">
                                    <div class="d-flex align-items-center justify-content-center mb-2">
                                        {% for i in "12345" %}
                                            {% if forloop.counter <= rating|add:"0" %}
                                                <i class="fas fa-star text-warning me-1"></i>
                                            {% else %}
                                                <i class="far fa-star text-muted me-1"></i>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                    <h6 class="mb-1">{{ rating }}星</h6>
                                    <small class="text-muted">{{ rating_counts|get_item:rating|default:0 }} 条</small>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
// 筛选功能
document.getElementById('ratingFilter').addEventListener('change', filterReviews);
document.getElementById('movieFilter').addEventListener('change', filterReviews);
document.getElementById('timeFilter').addEventListener('change', filterReviews);
document.getElementById('reviewSearch').addEventListener('input', filterReviews);

function filterReviews() {
    const ratingFilter = document.getElementById('ratingFilter').value;
    const movieFilter = document.getElementById('movieFilter').value;
    const timeFilter = document.getElementById('timeFilter').value;
    const searchTerm = document.getElementById('reviewSearch').value.toLowerCase();
    
    const rows = document.querySelectorAll('tbody tr');
    
    rows.forEach(row => {
        const rating = row.dataset.rating;
        const movie = row.dataset.movie;
        const time = row.dataset.time;
        const text = row.textContent.toLowerCase();
        
        const ratingMatch = !ratingFilter || rating === ratingFilter;
        const movieMatch = !movieFilter || movie === movieFilter;
        const timeMatch = !timeFilter || checkTimeFilter(time, timeFilter);
        const searchMatch = !searchTerm || text.includes(searchTerm);
        
        if (ratingMatch && movieMatch && timeMatch && searchMatch) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

function checkTimeFilter(reviewDate, filter) {
    const today = new Date();
    const review = new Date(reviewDate);
    
    switch(filter) {
        case 'today':
            return review.toDateString() === today.toDateString();
        case 'week':
            const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
            return review >= weekAgo;
        case 'month':
            const monthAgo = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
            return review >= monthAgo;
        default:
            return true;
    }
}

// 查看评论详情
function viewReview(reviewId) {
    // 实现查看评论详情功能
    alert('查看评论详情功能待实现');
}

// 删除评论
function deleteReview(reviewId, username) {
    const action = confirm(`确定要删除用户"${username}"的评论吗？此操作不可恢复！`);
    if (action) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.innerHTML = `
            {% csrf_token %}
            <input type="hidden" name="action" value="delete">
            <input type="hidden" name="review_id" value="${reviewId}">
        `;
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
{% endblock %} 